<template>
    <div class="date-range-picker">
      <el-date-picker
        v-model="dateRange"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        format="YYYY-MM-DD HH:mm:ss"
        value-format="YYYY-MM-DD HH:mm:ss"
        :disabled="disabled"
        @change="handleChange"
        style="width: 100%;"
      />
      <div class="quick-selects" v-if="showQuickSelect">
        <el-button size="small" @click="selectToday">今天</el-button>
        <el-button size="small" @click="selectYesterday">昨天</el-button>
        <el-button size="small" @click="selectLastWeek">最近一周</el-button>
        <el-button size="small" @click="selectLastMonth">最近一个月</el-button>
        <el-button size="small" @click="clearSelection">清除</el-button>
      </div>
    </div>
  </template>
  
  <script>
  import { ref, watch } from 'vue';
  import dayjs from 'dayjs';
  
  export default {
    name: 'DateRangePicker',
    props: {
      modelValue: {
        type: Array,
        default: () => []
      },
      disabled: {
        type: Boolean,
        default: false
      },
      showQuickSelect: {
        type: Boolean,
        default: true
      }
    },
    emits: ['update:modelValue', 'change'],
    setup(props, { emit }) {
      const dateRange = ref(props.modelValue);
      
      watch(() => props.modelValue, (newVal) => {
        dateRange.value = newVal;
      });
      
      const handleChange = (val) => {
        emit('update:modelValue', val);
        emit('change', val);
      };
      
      const formatDate = (date) => {
        return dayjs(date).format('YYYY-MM-DD HH:mm:ss');
      };
      
      const selectToday = () => {
        const startOfDay = dayjs().startOf('day').toDate();
        const endOfDay = dayjs().endOf('day').toDate();
        dateRange.value = [formatDate(startOfDay), formatDate(endOfDay)];
        handleChange(dateRange.value);
      };
      
      const selectYesterday = () => {
        const yesterday = dayjs().subtract(1, 'day');
        const startOfDay = yesterday.startOf('day').toDate();
        const endOfDay = yesterday.endOf('day').toDate();
        dateRange.value = [formatDate(startOfDay), formatDate(endOfDay)];
        handleChange(dateRange.value);
      };
      
      const selectLastWeek = () => {
        const endDate = dayjs().endOf('day').toDate();
        const startDate = dayjs().subtract(7, 'day').startOf('day').toDate();
        dateRange.value = [formatDate(startDate), formatDate(endDate)];
        handleChange(dateRange.value);
      };
      
      const selectLastMonth = () => {
        const endDate = dayjs().endOf('day').toDate();
        const startDate = dayjs().subtract(30, 'day').startOf('day').toDate();
        dateRange.value = [formatDate(startDate), formatDate(endDate)];
        handleChange(dateRange.value);
      };
      
      const clearSelection = () => {
        dateRange.value = [];
        handleChange(dateRange.value);
      };
      
      return {
        dateRange,
        handleChange,
        selectToday,
        selectYesterday,
        selectLastWeek,
        selectLastMonth,
        clearSelection
      };
    }
  };
  </script>
  
  <style scoped>
  .date-range-picker {
    width: 100%;
  }
  
  .quick-selects {
    margin-top: 8px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }
  </style>